<template>
<div id="div1">

    <el-row>
      <el-col :span="24" class="grid-content "></el-col>
    </el-row>
    <el-row>
      <el-col :span="15"><div class="grid-content"></div></el-col>
      <el-col :span="5" class="login">
     
        <el-form    style="width:500px;margin:auto;margin-top:100px;text-align:center;" ref="user" :rules="rules" :model="user" id="fm">
          <el-form-item >
             <!-- <img src="../assets/product-icon.png" width="196px" height="208px"> -->
              <img src="../assets/sw.png" width="196px" height="208px">
          </el-form-item>
          <el-form-item>
            <span style="font-size:50px;font-weight: 1000;">智慧水务管理系统</span>
          </el-form-item>
          <el-form-item prop="userName">
            <img src="../assets/user.png" style="float:left">
            <el-input style="width:350px;" Opacity="0.25"  v-model="user.userName" type="text" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <img src="../assets/key.png" style="float:left">
            <el-input  style="width:350px" v-model="user.password" type="password"  placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-row>
               <el-form-item  style="width:330px;float: left;">
                 <img src="../assets/key2.jpg" style="float:left;" width="39px" height="37px" >
                  <el-input type="text" style="width:190px;" placeholder="请输入验证码" v-model="inputCode" ></el-input>
               </el-form-item>
              <div class="coderight" @click="refreshCode" style="margin-right:50px;">
                 <SIdentify :identifyCode="identifyCode" ></SIdentify><span style="font-size: 12px;color: #070E14;">看不清楚?点击更换</span>
              </div>
          </el-row>
          <el-form-item class="but">
              <el-button type="success" @click="login" id="btuLogin" >登录</el-button>
              <el-button @click="reset">重置</el-button>
          </el-form-item>

        </el-form>
        </el-col>
      <!-- <el-col :span="8"><div class="grid-content "></div></el-col> -->
    </el-row>


</div>
</template>

<script>
import SIdentify from "../components/show/SIdentify";



export default{
  data(){
    return{
      user:{
        userName:"",
        password:""
      },
       identifyCodes: "1234567890",
       identifyCode: '',
       inputCode:'',
       rules:{
         userName:[
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
         ],
         password:[
           { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
         ]
       }
    }
  },
  methods:{
      login(){


        if(this.inputCode!=this.identifyCode){
          this.$message({
            type:'erro',
            message:'验证码不正确'
          })
          return
        }
        this.axios.post("user/login",this.user).then(res=>{
          if(res.data.code==200){
            let token=res.data.data;
            let name=res.data.msg;
            window.localStorage.setItem("Authorization",token);
            window.localStorage.setItem("LoginName",name);
            this.$router.push("/home");
          }
          else{
            this.$message({
            message:res.data.msg,
            type:'erro'
          })
          }
        })
      },
      reset(){
         this.user.userName=''
         this.user.password=''
      },




//验证码abcdefghijklnmopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    },
    Refresh(){

    }
  },


  created(){
    // this.$router.push('/SIdentify')
  },
 mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
components: {
    SIdentify: SIdentify
  },

}
</script>

<style scoped lang='less'>

#div1{
  width: 100%;
  height: 100%;
  background-image: url(../assets/bg.jpg);
  
}


  .grid-content {
    border-radius: 4px;
    min-height: 100px;
  }


  .login{
    font-weight: 400;
    width: 540px;
    height: 700px;
    border:  solid #dcdfe6;
    border-radius: 15px;
    background-color: #D5DBE7;
  // margin-top: 10px;
  //半透明
  // filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; 
  }

  .but{
    padding: auto;
   
  }

</style>
